<template>
    <Card :title="title" :desc="props.desc" @event-more="handleMore">
        <div class="ranking-list" v-show="props.data">
            <div v-for="(item, idx) in props.data" :key="idx" class="ranking-list-item">
                <div class="ranking-list-item-title-wrapper">
                    <div
                        class="idx"
                        :style="{backgroundColor: idx <= props.serialIdx ? props.serialChooseBgColor : props.serialDefaultColor}"
                    >
                        {{ idx + 1 }}
                    </div>
                    <div
                        ref="titleEle"
                        class="ranking-list-item-title text-1"
                        :style="{minWidth: width.titleMinWidth + 'px'}"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div ref="gradualEle" class="gradual">
                    <div
                        :class="[props.gradualClassName, 'gradual-base']"
                        :style="{
                            ...(width.gradualEleWidth.length
                                ? {width: width.gradualEleWidth[idx] + 'px !important', flex: 'inherit'}
                                : {}),
                        }"
                    ></div>
                </div>

                <div ref="unitEle" class="ranking-list-item-unit" :style="{minWidth: width.unitWidth + 'px'}">
                    {{ `${item.value}(${item.unit})` }}
                </div>
            </div>

            <div class="more" v-show="isMore" @click="handleMore" :style="{minWidth: width.titleMinWidth + 'px'}">
                更多 >
            </div>
        </div>
    </Card>
</template>

<script setup>
import Card from './Card.vue';

import {ref, onMounted, reactive, watchEffect} from 'vue';
import {getSimilarNodeWidth} from '../utils';

const emit = defineEmits(['eventMore']);
const props = defineProps({
    title: {
        type: String,
        default: '', // 标题
    },
    desc: {
        type: String,
        default: '', // 描述
    },
    data: {
        type: Array,
        default: [], // 数据
    },
    serialIdx: {
        type: Number,
        required: false,
        default: 2, // 序号
    },
    serialChooseBgColor: {
        type: String,
        required: false,
        default: '#0075f4', // 序号选中颜色
    },
    serialDefaultColor: {
        type: String,
        required: false,
        default: '#ccc', // 序号默认颜色
    },
    gradualClassName: {
        // 渐变类名
        type: String,
        required: false,
        default: 'gradient-bg',
    },
    isMore: {
        type: Boolean,
        required: false,
        default: true, // 是否显示更多
    },
});

const titleEle = ref();
const gradualEle = ref();
const unitEle = ref();

const width = reactive({
    unitWidth: 0,
    gradualWidth: 0,
    titleMinWidth: 60,
    gradualEleWidth: [],
});

const initEle = () => {
    const titleClassName = 'ranking-list-item-title';
    width.titleMinWidth = getSimilarNodeWidth(titleEle.value, titleClassName);

    const gradualClassName = 'gradual';
    width.gradualWidth = getSimilarNodeWidth(gradualEle.value, gradualClassName);

    const unitClassName = 'ranking-list-item-unit';
    width.unitWidth = getSimilarNodeWidth(unitEle.value, unitClassName);
};

watchEffect(() => {
    if (width.gradualWidth > 0) {
        const gradualMax = Math.max(...props.data.map(item => item.value));
        const step = Number(width.gradualWidth / gradualMax).toFixed(2);
        width.gradualEleWidth = props.data.map(item => Number(item.value * step).toFixed(2));
    }
}, [width.gradualWidth]);

const handleMore = () => {
    emit('eventMore');
};

onMounted(() => {
    initEle();
});
</script>

<style lang="css" scoped>
.ranking-list {
    .ranking-list-item {
        display: flex;
        flex: 1;
        align-items: center;
        margin-top: 12px;

        .ranking-list-item-title-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .idx {
                width: 12px;
                height: 12px;
                padding: 2px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 12px;
                margin-right: 8px;
            }

            .ranking-list-item-title {
                min-width: 50px;
                max-width: 78px;
                font-size: 14px;
                font-weight: 500;
                color: #151b26;
                line-height: 22px;
                height: 22px;
            }
        }

        .gradual {
            flex: 1;
            margin: 0 8px 0 12px;

            .gradual-base {
                height: 12px;
            }
        }

        .gradient-bg {
            background: linear-gradient(270deg, #4aa1fa 0%, #2468f2 100%);
        }

        .ranking-list-item-unit {
            height: 22px;
            font-size: 14px;
            font-weight: 400;
            color: #151b26;
            line-height: 22px;
        }
    }
}

.more {
    margin: 12px 0 0 24px;
    color: #2468f2;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
}
</style>
